<template>
  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="搜索">
        <el-input v-model="formInline.search" placeholder="支持合同编号、合同名称、客户名称搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-table align="center"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="cid"
          label="合同编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cname"
          label="合同名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="customer"
          label="客户名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="price"
          label="合同金额"
          width="120">
      </el-table-column>
      <el-table-column
          prop="created"
          format="yyyy-MM-dd"
          label="日期"
          width="120"
          sortable
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="up(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-button type="primary" @click="delByIds">批量删除</el-button>

    <el-pagination
        @current-change="gopage"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>



    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="合同编号" :label-width="formLabelWidth">
          <el-input v-model="form.cid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同名称" :label-width="formLabelWidth">
          <el-input v-model="form.cname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" :label-width="formLabelWidth">
          <el-input v-model="form.customer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="合同金额" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="签订日期" :label-width="formLabelWidth">
            <el-date-picker
                v-model="form.created"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upById">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
export default {
  name: "ContractView",
  data() {
    return {
      tableData:[],
      size:3,
      total:0,
      current:1,
      formInline:{},
      ids:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},

    }
  },
  methods:{

    upById() {
      this.axios.post("/contract/contract/upById",this.form)
          .then(res=>{
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.initp();
              this.dialogFormVisible=false;s
            } else {
              this.$message.error(res.data.msg);
            }
          })
    },
    up(row) {
      this.form=row;
      this.dialogFormVisible=true;
    },
    delByIds() {
      let id = this.ids.map(res=>res.id).join();
      console.log(id)
      confirm("确定删除id为"+id)
      this.axios.post("/contract/contract/delByIds?ids="+id)
          .then(res=>{
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.initp();
            } else {
              this.$message.error(res.data.msg);
            }
          })
      this.initp();
    },
    init() {
      this.axios.post("/contract/contract/list?size="+this.size+"&current="+this.current,this.formInline)
          .then(res=>{
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          })
    },
    initp() {
      this.axios.post("/contract/contract/listp?size="+this.size+"&current="+this.current,this.formInline)
          .then(res=>{
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          })
    },
    gopage(current) {
      this.current = current;
      this.init();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val;
    }
  },
  created() {
    this.initp();
  }
}
</script>

<style scoped>

</style>